import React from 'react'
import { Col, Form, Input, InputNumber, Icon, Modal, Row, Radio, Button, message, Select} from 'antd'
import { Loader } from 'components'
import styles from './index.less'
import lodash from 'lodash'

const FormItem = Form.Item
const OuterLogisticsModal = ({
  dispatch,
  form: {
    getFieldDecorator,
    validateFields,
    setFieldsValue,
    getFieldValue
  },
  visible,
  item,
  logisticCompanys,
  loading
}) => {

  const hideOuterLogisticsModal = () => {
    dispatch({
      type: 'contractInProduction/toggleOuterLogisticsVisible',
      outerLogisticsModalVisible: false
    })
    dispatch({
      type: 'contractInProduction/setOuterLogistics',
      outerLogistics: {}
    })
  }

  const confirmEditModal = (e) => {
    if(item.logisticInfo){
      for(let i = 0, len = item.logisticInfo.length; i< len; i++){
        let val = item.logisticInfo[i];
        if(!val.companyCode || !val.logisticNum){
          message.error("请将数据填写完整再保存！");
          return;
        }
      }
    }
    let _t = [];
    item.logisticInfo.forEach(val => {
      _t.push({
        companyCode: val.companyCode,
        logisticNum: val.logisticNum
      })
    })
    console.log(item)
    dispatch({
      type: 'contractInProduction/editOuterLogistics',
      params: {
        contractNum: item.contractNum,
        logisticUnitParameter: _t
      }
    })
  }

  const addItem = () => {
    if(!item.logisticInfo){
      item.logisticInfo = [{}];
    }else{
      item.logisticInfo.push({})
    }
    dispatch({
      type: 'contractInProduction/setOuterLogistics',
      outerLogistics: item
    })
  }

  const delItem = (index) => {
    item.logisticInfo.splice(index, 1);
    dispatch({
      type: 'contractInProduction/setOuterLogistics',
      outerLogistics: item
    })
  }

  const formItemLayout = {
    labelCol: {
      span: 6
    },
    wrapperCol: {
      span: 18
    }
  }

  const changeField = (value, index , field) => {
    item.logisticInfo[index][field] = value;
    dispatch({
      type: 'contractInProduction/setOuterLogistics',
      outerLogistics: item
    })
  }

  return (
    <Modal 
      visible={visible} 
      width={400} 
      title={"查看外部物流信息"} 
      className={styles.outerLogisticsModal} 
      onCancel={hideOuterLogisticsModal}
      footer={[
        <Button key="back" onClick={hideOuterLogisticsModal}>关闭</Button>,
        <Button key="submit" type="primary" onClick={confirmEditModal}>保存</Button>
      ]}>
        <Form>
          {
            item.logisticInfo && item.logisticInfo.map((val, index) => (
              <div className={styles.item} key={index}>
                <Icon type="minus-square" theme="filled" className={styles.icon} onClick={() => delItem(index)} />
                <Row>
                  <Col span={6}>
                    物流公司：
                  </Col>
                  <Col span={18}>
                    <Select placeholder='请填写物流公司' value={val.companyCode} onChange={(e) => changeField(e, index, 'companyCode')}>
                      {logisticCompanys.map(item => (
                        <Select.Option key={item.companyCode} value={item.companyCode}>
                          {item.companyName}
                        </Select.Option>
                      ))}
                    </Select>
                  </Col>
                </Row>
                <Row>
                  <Col span={6}>
                    物流单号：
                  </Col>
                  <Col span={18}>
                    <Input placeholder='请填写物流单号' value={val.logisticNum} onChange={(e) => changeField(e.target.value, index, 'logisticNum')} />
                  </Col>
                </Row>
              </div>
            ))
          }
          {
            !item.logisticInfo || item.logisticInfo.length == 0
             ? <div className={styles.nodata}>未添加任何外部物流信息</div>
             : null
          }
          <Button icon="plus" block onClick={addItem}>添加</Button>
        </Form>
    </Modal>
  )

}

export default Form.create()(OuterLogisticsModal)